<template>
  <el-tag v-for="tag in tagList" :key="tag" closable :disable-transitions="false" @close="handleClose(tag)" class="my-tag">
    {{ tag }}
  </el-tag>
  <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" class="mb4" size="small"
    @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
  <el-button v-else class="mb4" size="small" @click="showInput" type="success">
    <span style="font-size:18px;margin-right:5px">+</span>
    新增
  </el-button>
</template>

<script setup>
import { nextTick, ref } from 'vue'

const props = defineProps(['tagList'])
const inputValue = ref('')
const inputVisible = ref(false)
const InputRef = ref(null)

const handleClose = (tag) => {
  props.tagList.splice(props.tagList.indexOf(tag), 1)
}

const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value.input.focus()
  })
}

const handleInputConfirm = () => {
  if (inputValue.value) {
    props.tagList.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}
</script>

<style lang="scss" scoped>
.my-tag {
  margin: 0px 4px 4px 0px;
}
.mb4 {
  margin-bottom: 4px;
  &.el-input {
    width: 100px;
  }
}

</style>
